<template>
  <div class="Service_Book">
    <!-- 头部 -->
    <van-nav-bar
      :fixed="true"
      :title="title"
      :safe-area-inset-top="true"
      :placeholder="true"
      :border="false"
    >
      <template #left>
        <div @click="onClickLeft" class="iconfont icon-back"></div>
      </template>
      <template #right>
        <div @click="shareFn" class="iconfont icon-fenxiang08-F upload"></div>
      </template>
    </van-nav-bar>
    <!-- 图片 兼 一段文字介绍 兼 展开内容 -->
    <BookContainerImage :image="image" :length="length" />
    <!-- Suitable for pets  -->
    <BookSuitable />
    <div class="Service_Book_button">
      <van-button color="#1ab692" round @click="navigateToAppointment"
        >Book Appointment</van-button
      >
    </div>
  </div>
</template>

<script setup>
import { defineAsyncComponent } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

const title = route.query.title || "";
const image = route.query.image || "";
const length = parseInt(route.query.length) || 0;

// 异步加载组件
const BookContainerImage = defineAsyncComponent(() =>
  import("./BookContainerImage.vue")
);
const BookSuitable = defineAsyncComponent(() => import("./BookSuitable.vue"));

// 跳转到 Appointment 页面
const navigateToAppointment = () => {
  router.push({
    name: "appointment", // 目标页面路径
    query: {
      title: "Book Appointment", // 动态传递标题内容
      hideShareIcon: true, // 隐藏分享图标
    },
  });
};
const onClickLeft = () => history.back();
</script>

<style lang="less" scoped>
.Service_Book {
  .Service_Book_button {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    z-index: 99;
    display: flex;
    justify-content: center;
    .van-button {
      width: 90%;
      height: 40px;
      margin-top: 10px;
      font-weight: bold;
    }
  }
}
</style>